﻿import QtQuick 2.0
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtQuick.Layouts 1.1

Rectangle {
    id: rectangle1
    color:"transparent"//Qt.rgba(97/255,178/255,244/255,1)
    anchors.fill: parent
    width: 400
    height: 600
    property int columnWidth: 120

    ColumnLayout{
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        anchors.top: parent.top
        anchors.topMargin: 20
        spacing: 30

        CheckBox {
            text: "CheckBox"
            implicitWidth: columnWidth
        }

        CheckBox {
            text: "CheckBox"
            implicitWidth: columnWidth
            style: CheckBoxStyle {
                    indicator: Rectangle {
                            implicitWidth: 16
                            implicitHeight: 16
                            radius: 3
                            border.color: control.activeFocus ? "darkblue" : "gray"
                            border.width: 1
                            Rectangle {
                                visible: control.checked
                                color: "#555"
                                border.color: "#333"
                                radius: 1
                                anchors.margins: 4
                                anchors.fill: parent
                            }
                    }
                }
        }

        CheckBox {
            text: "CheckBox"
            implicitWidth: columnWidth
            property color textColor: "#def3fd"
            property color indicatorColor: "transparent"
            property color indicatorBorderColor: "transparent"
            property color indicatorBorderActiveColor: "transparent"
            property real indicatorBorderWidth: 1
            property real indicatorRadius: 3
            property string indicatorCheckedImage: "images/chkBoxChecked.png"
            property string indicatorUnCheckedImage: "images/chkBoxNor.png"
            property size indicatorImageSize:Qt.size(0,0)
            id:ckbox

            height:25
            width:40

            activeFocusOnPress:true

            style: CheckBoxStyle {
                indicator: Rectangle {
                    implicitWidth: 16
                    implicitHeight: 16
                    radius: ckbox.indicatorRadius

                    color: ckbox.indicatorColor
                    border.color: control.activeFocus ? ckbox.indicatorBorderColor : ckbox.indicatorBorderActiveColor
                    border.width: ckbox.indicatorBorderWidth

                    Rectangle {
                        id:rectckbIndicator
                        visible: ckbox.indicatorUnCheckedImage.length>0?true:control.checked
                        color: "transparent"//"#555"
                        border.color: "transparent"//"#333"
                        anchors.fill: parent
                        Image {
                            anchors.fill: rectckbIndicator
                            anchors.margins: 0
                            source: control.checked?ckbox.indicatorCheckedImage:ckbox.indicatorUnCheckedImage
                            sourceSize: ((ckbox.indicatorImageSize.x!=-1)&&(ckbox.indicatorImageSize.y!=-1))?ckbox.indicatorImageSize:Qt.size(rectckbIndicator.parent.width,rectckbIndicator.parent.height)
                            width: implicitWidth; height: implicitHeight
                        }
                    }
                }
                label: Label{
                    text:ckbox.text
                    color:ckbox.textColor
                    font.pixelSize: 12
                }
            }
            MouseArea{
                anchors.fill:parent
                acceptedButtons: Qt.NoButton
                cursorShape: Qt.PointingHandCursor
            }
        }




        Item{
            Layout.fillHeight: true;
        }
    }

}
